<script setup>
import { ref, watch } from 'vue'
import { onSearchApi } from '@/apis/search.js'
import { ElMessage } from 'element-plus'
import bus from '@/utils/bus'

const props = defineProps({
  searchName: {
    type: String
  }
})

// 搜索结果
const searchList = ref([])
// 触底加载
const isLoad = ref(false)
const loadSearchPlayList = async () => {
  bus.emit('changeIsLoading', true)
  const { data } = await onSearchApi(props.searchName, 1004, 20, searchList.value.length)
  console.log(data);
  bus.emit('changeIsLoading', false)
  if (data.result.mvs.length === 0) {
    isLoad.value = true
    return ElMessage('到底啦')
  }
  searchList.value.push(...data.result.mvs)
}

// 搜索词变化时，触发搜索
watch(() => props.searchName, async () => {
  const { data } = await onSearchApi(props.searchName, 1004, 20, searchList.value.length)
  searchList.value = data.result.mvs
})
</script>

<template>
  <div class="search-video-list" v-infinite-scroll="loadSearchPlayList" :infinite-scroll-disabled="isLoad"
    :infinite-scroll-delay="400" :infinite-scroll-distance="400">
    <div class="content-box">
      <template v-for="(item, index) in searchList" :key="item.id">
        <RouterLink :to="`/musicVideo/detail/${item.id}`" class="content">
          <MusicVideoCard :video="item" :index="index" />
        </RouterLink>
      </template>
    </div>
  </div>
</template>

<style scoped lang='scss'>
.search-video-list {
  .content-box {
    padding: 0px 10px;
    max-width: 1165px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .content {
      margin-top: 20px;
      margin-bottom: 10px;
      width: 30%;
      cursor: pointer;
      position: relative;
    }
  }
}
</style>
